<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-我的消息</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/my.css">

</head>
<body>

{include file="public/header" model='my' /}
{include file="public/myheader" model='message' /}

<div class="my-box-width">
    <div class="layui-fluid">

        <div class="layui-row my-order">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">订单消息</li>
                    <li>互动消息</li>
                    <li>系统消息</li>
                </ul>
                <div class="layui-tab-content">

                    <div class="layui-tab-item layui-show">

                        <div class="order-message">

                            <div class="layui-row layui-col-space20" id="order_message_box"></div>

                        </div>

                        <div id="system-page"></div>


                    </div>
                    <div class="layui-tab-item">

                        <div class="order-message system-message" id="commentMsgBox"></div>

                    </div>
                    <div class="layui-tab-item">

                        <div class="order-message">

                            <div class="layui-row layui-col-space20" id="system_message_box"></div>

                        </div>

                        <div id="system-page3"></div>

                    </div>

                </div>

            </div>


        </div>

    </div>
</div>

<div style="height: 50px"></div>

{include file="public/footer" /}

<style>
   #commentMsgBox li{
       border: 1px solid #E6E6E6;
       padding: 30px;
       display: flex;
       justify-content: flex-start;
       margin-bottom: 20px;
   }
   .comment-user-icon{
       margin-right: 30px;
   }
    .comment-message-title{
        color: #5C5C5C;
    }
    .comment-message-title a{
        color: #2D9FFF;
    }
    .comment-d-box{
        padding-top: 4px;
    }
    .comment-message-title{
        margin-bottom: 24px;
    }
    .comment-message-content{
        margin-bottom: 24px;
    }
    .comment-time{
        color: #ADADAD;
    }

</style>
<script>
    var $ = layui.jquery;
    var layer = layui.layer
        , element = layui.element
        , laypage = layui.laypage;

    //执行一个laypage实例
    var orderMessageCount = '{$orderMessageCount}';
    laypage.render({
        elem: 'system-page' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: orderMessageCount //数据总数，从服务端得到
        ,theme:'selfstyle'
        ,limit:5
        ,jump: function(obj, first){
            $.ajax({
                type: "post",
                url: "{:url('My/getOrderMessage')}",
                data: {page:obj.curr},
                success:function(data){
                    var system_str = '';
                    $.each(data.data,function(k,v){
                        system_str += '<div class="layui-col-md12">';

                        system_str += '<div class="order-message-ever">';

                        system_str += '<div class="order-message-ever-l">';
                        system_str += '<i class="order-message-icon"></i>';
                        system_str += '</div>';

                        system_str += '<div class="order-message-ever-r">';
                        system_str += '<div class="order-message-ever-r-1">';
                        system_str += '<div class="order-message-ever-r-1-l">'+ v.msg_title +'</div>';
                        system_str += '<div class="order-message-ever-r-1-r">' + v.create_time +'</div>';
                        system_str += '</div>';
                        system_str += '<div class="order-message-ever-r-2">';
                        system_str += v.msg_content;
                        system_str += '</div>';

                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '</div>';
                    });

                    $('#order_message_box').html(system_str);

                }
            });
        }
    });

    //执行一个laypage实例
    var systemMessageCount = '{$systemMessageCount}';
    laypage.render({
        elem: 'system-page3' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: systemMessageCount //数据总数，从服务端得到
        ,theme:'selfstyle3'
        ,limit:5
        ,jump: function(obj, first){
            $.ajax({
                type: "post",
                url: "{:url('My/getSystemMessage')}",
                data: {page:obj.curr},
                success:function(data){
                    var system_str = '';
                    $.each(data.data,function(k,v){
                        system_str += '<div class="layui-col-md12">';

                        system_str += '<div class="order-message-ever">';

                        system_str += '<div class="order-message-ever-l">';
                        system_str += '<i class="order-message-icon system-message-icon"></i>';
                        system_str += '</div>';

                        system_str += '<div class="order-message-ever-r">';
                        system_str += '<div class="order-message-ever-r-1">';
                        system_str += '<div class="order-message-ever-r-1-l">'+ v.msg_title +'</div>';
                        system_str += '<div class="order-message-ever-r-1-r">' + v.create_time +'</div>';
                        system_str += '</div>';
                        system_str += '<div class="order-message-ever-r-2">';
                        system_str += v.msg_content;
                        system_str += '</div>';

                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '</div>';
                    });

                    $('#system_message_box').html(system_str);

                }
            });
        }
    });

    var commentMsg = {$commentMessage};
    var comment_str = '';
    $.each(commentMsg,function(k,v){
        if (v.type == 1){
            comment_str +=  '<li>';
            comment_str +=      '<div class="comment-user-icon">';
            comment_str +=          '<img src="/static/index/images/message-icon3.png" alt="">';
            comment_str +=      '</div>';
            comment_str +=      '<div class="comment-d-box">';
            comment_str +=          '<div class="comment-message-title">';
            comment_str +=              '<span class="commentUser">'+ v.nickname +'</span>';
            comment_str +=              '<span class="comment-p">评论了你的</span>';
            if (v.status == 0){
                comment_str +=          '<a target="_blank" href="/index/circle/method/id/'+ v.mid +'.html">《'+ v.title +'》</a>';
            }else if(v.status == 1){
                comment_str +=          '<a target="_blank" href="/index/circle/circle/id/'+ v.mid +'.html">《'+ v.title +'》</a>';
            }else if(v.status == 2){
                comment_str +=          '<a target="_blank" href="/index/circle/circle/id/'+ v.mid +'.html">《'+ v.title +'》</a>';
            }
            comment_str +=           '</div>';
            comment_str +=           '<div class="comment-message-content">';
            comment_str +=              v.comment_content;
            comment_str +=           '</div>';
            comment_str +=           '<div class="comment-time">'+ v.time +'</div>';
            comment_str +=        '</div>';
            comment_str +=   '</li>';

        } else if(v.type == 2){
            comment_str +=  '<li>';
            comment_str +=      '<div class="comment-user-icon">';
            comment_str +=          '<img src="/static/index/images/message-icon3.png" alt="">';
            comment_str +=      '</div>';
            comment_str +=      '<div class="comment-d-box">';
            comment_str +=          '<div class="comment-message-title">';
            comment_str +=              '<span class="commentUser">'+ v.nickname +'</span>';
            comment_str +=              '<span class="comment-p">评论了你的</span>';
            if (v.status == 1){
                comment_str +=          '<a target="_blank" href="/index/article/article?id='+ v.article_id +'">《'+ v.article_title +'》</a>';
            }else{
                comment_str +=          '<a target="_blank" href="/index/video/video?id='+ v.video_id +'">《'+ v.video_title +'》</a>';
            }
            comment_str +=           '</div>';
            comment_str +=           '<div class="comment-message-content">';
            comment_str +=              v.comment_content;
            comment_str +=           '</div>';
            comment_str +=           '<div class="comment-time">'+ v.time +'</div>';
            comment_str +=        '</div>';
            comment_str +=   '</li>';
        }
    });

    $('#commentMsgBox').html(comment_str);



</script>
</body>
</html>